<template>
	<view class="container">
		<uv-sticky bgColor="#fff" style="margin: 0 0 30rpx;">
			<uv-tabs :current="current" :scrollable="false" :list="[{name: '全部'}, 
			{name: '待付款'}, {name: '已支付'}, {name: '已完成'}, {name: '已退款'}]" @click="click"></uv-tabs>
		</uv-sticky>

		<list ref="refList" url="/api/v1/order" res="data.data" :req="{status:status}">
			<template #list="{list}">
				<view style="padding:30rpx;">
					<view v-for="(item,index) in list" :key="index" class="bgWrite"
						@click="route('pages/mine/orderDetails',{id:item.id})">
						<view class="timeBox">
							<view class="txtTime">{{item.created_at}}</view>
							<view class="txtType">{{getStatus(item.status)}}</view>
						</view>
						<view class="topBox">
							<view style="margin-right: 20rpx;">
								<image :src="imgUrl(item?.product_cover)" style="width: 150rpx; height: 150rpx;border-radius:8rpx;">
								</image>
							</view>
							<view>
								<view class="title">{{item?.product?.title}}</view>
								<view class="schoolBox">
									<view class="txtAdd01">位置：
										{{item?.product?.schools[0]?.province?.name}}
										{{item?.product?.schools[0]?.city?.name}}
										{{item?.product?.schools[0]?.area?.name}}
										{{item?.product?.schools[0]?.area?.name}}
										{{item?.product?.schools[0]?.address}}
									</view>
									<view>
										<view @click.stop="toMap(item?.product?.schools[0])">
											<image src="@/static/img/icon06.png" style="width: 40rpx;height: 40rpx;">
											</image>
										</view>
									</view>
								</view>
								<view class="txtNumber">¥{{item?.product?.price}}</view>
							</view>
						</view>
						<view style="overflow: hidden;">
							<view class="btnBox">
								<button class="blueBtn" @click.stop="paymini(item.order_no)"
									v-if="item.status=='0'">立即付款</button>
								<button @click.stop="cancel1(item.id)" v-if="item.status=='3'||item.status=='4'||item.status=='6'"  class="quBtn">删除订单</button>
								<button @click.stop="cancel(item.id)" v-if="item.status=='0'" class="quBtn">取消订单</button>
								<button class="blueBtn" @click.stop="tui(item.id)" v-if="item.status=='1'||item.status=='5'">退款</button>
								<button class="blueBtn" @click="qu(item.id)" v-if="item.status=='2'">取消退款</button>
							</view>
						</view>
					</view>
				</view>
			</template>
		</list>
		<!-- 更多内容 -->
	</view>
</template>

<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref, nextTick } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import list from '@/components/list';

	onLoad((e) => {
		current.value = e.index
		console.log('current.value ', current.value)
	});
	onShow(() => {
		click({ index: current.value })
	})
	const toMap = (item) => {
		uni.openLocation({
			name: item.name,
			latitude: Number(item.place.split(',')[1]), //要去的纬度
			longitude: Number(item.place.split(',')[0]), //要去的经度 
			address: item.address, //要去的具体地址 
		})
	}
	const [refList, loading, status, current] = [ref(), ref(), ref(), ref()];
	//获取分页
	const get_list = () => {
		nextTick(() => {
			refList.value.init()
		})
	};
	const click = (e) => {
		console.log("看看这个是", e.index);
		status.value = ['', 1, 2, 3, 4][e.index]
		get_list()
	};
	const getStatus = (e) => {
		if (e == 0) {
			return '待支付';
		} else if (e == 1) {
			return '已支付';
		} else if (e == 2) {
			return '退款申请 ';
		} else if (e == 3) {
			return '已取消 ';
		} else if (e == 4) {
			return '已退款 ';
		}else if (e == 5) {
			return '已支付 ';
		}
		return '已完成'
	}
	const qu = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/cancel_refund`, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('取消成功！');
				get_info();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//取消订单
	const cancel = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/cancel `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('取消成功！');
				get_list();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//删除订单
	const cancel1 = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/delete `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('删除成功！');
				get_list();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//退款
	const tui = (e) => {
		let params = {
			id: e,
		}
		http.post(`/api/v1/order/refund `, params, { custom: { loading: true } })
			.then((res : any) => {
				toast('退款成功！');
				get_list();
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	};
	//调用支付
	const paymini = (resX) => {
		const params = {
			order_no: resX
		};
		http.post(`/api/v1/order/pay`, params, { custom: { loading: true } })
			.then(res => {
				setTimeout(() => {
					loading.value = false
				}, 1500)
				console.log("支付进来了吗", resX)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(res.data.timeStamp),
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: res => {
						uni.redirectTo({ url: '/pages/lesson/paySuccess' })
					},
					fail(e) {
						console.log(e);
					}
				})

			})
			.catch(err => {
				console.log(err);
			})
	}
</script>


<style lang="scss" scoped>
	page {
		background: rgba(248, 249, 251, 1);
	}
	.txtTime{
		font-weight: 500;
		font-size: 22rpx;
		color: #666666;
	}
	.txtType{
		font-weight: bold;
		font-size: 22rpx;
		color: #333333;
	}
	.container {
		// padding-bottom: 50rpx;
	}
	.quBtn{
		width: 148rpx;
		height: 60rpx;
	   display: flex;          /* 启用 Flexbox 布局 */
	   justify-content: center; /* 水平居中 */
	   align-items: center;    /* 垂直居中 */
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		opacity: 1;
		color: #999;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #999999;
	}

	.blueBtn {
		/* margin: 10rpx 0 0; */
		width: 148rpx;
		height: 60rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		  display: flex;          /* 启用 Flexbox 布局 */
		  justify-content: center; /* 水平居中 */
		  align-items: center;    /* 垂直居中 */
		font-size: 24rpx;
		opacity: 1;
		color: #fff;
		background: rgba(49, 192, 237, 1);
	}

	::v-deep .blueBtn:after {
		border: none;
	}

	.hTtl {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		/* font-weight: 700; */
		line-height: 21px;
		color: rgba(0, 0, 0, 1);
	}

	.bgWrite {
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx 30rpx 25rpx;
	}

	.topBox {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		margin-bottom: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}


	.txtNumber {
		line-height: 32px;
		font-weight: bold;
		font-size: 24rpx;
		color: #31C0ED;
	}

	.schoolBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-top: 1px solid rgba(242, 242, 242, 1); */
		/* padding-top: 10rpx; */
		margin-top: 10rpx;
	}

	.txtAdd01 {
		padding-right: 30rpx;
		font-size: 22rpx;
		line-height: 38rpx;
		font-weight: 500;
		color: #666666;
	}

	.timeBox {
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: rgba(102, 102, 102, 1);
	}

	.btnBox {
		/* width: 175px; */
		float: right;
		overflow: hidden;
		zoom: 1;
	}

	.btnBox button {
		padding: 0;
		width: 145rpx;
		height: 60rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		float: right;
		margin-left: 25rpx;
	}
</style>